﻿<!doctype html>
<html ng-app="todoApp">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
        <script src="https://cdn.firebase.com/js/client/1.0.19/firebase.js"></script>
        <script src="todo.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
        <link rel="stylesheet" href="todo.css">
        <title>Todo list</title>
    </head>
    <body ng-controller="TodoController">
        <h2 class="main-title">Todo list ({{count}})</h2>
        <form name="todoForm" ng-submit="addTodo()">
            <input type="text" class="" ng-model="todoText" placeholder="new todo..." required autofocus>
            <input class="btn-add" type="submit" value="+" title="Add" ng-disabled="todoForm.$invalid">
            <a href="" ng-click="removeDones()" class="btn-remove" ng-show="donesCount > 0">Remove {{pluralize(donesCount)}} marked as done</a>
        </form>
        <ul>
            <li class="deleted-{{todo.deleted}}" ng-repeat="todo in todos">
                <label>
                    <input type="checkbox" ng-model="todo.done" ng-change="updateTodoState(todo)">
                    <span class="done-{{todo.done}}">{{todo.text}}</span>
                </label>
            </li>
        </ul>
    </body>
</html>